
input {
  flex: 1;
  font-size: 30rpx;
  color: #555;
  padding-right: 20rpx;
  border: rgb(112, 112, 112) solid 1rpx;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}
scroll-view {
  max-height: 78vh;
}
.title-view {
  position: fixed;
  display: flex;
  bottom: 8vh;
  // margin: 20rpx;
  padding: 30rpx;
  padding-bottom: 5vh;
  width: 100%;
  background-color: #fff;
  vertical-align: middle;
}
input {
  // width: 60%;
  display: inline-block;
  flex: 8;
}
.bottom-button {
  display: inline-block;
  padding: 14rpx 50rpx;
  border-radius: 10rpx;
  margin-left: 20rpx;
  flex: 1;
}
.content-view {
  padding: 0 .5rem;
  color: #555;
  // margin: 40rpx;
}
.begin {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
  margin-top: 1rem;
  .begin-title {
    font-size: 30rpx;
    padding-bottom: .3rem;
  }
  .begin-tips {
    text-indent: 2ch;
    line-height: 1.3rem;
  }
  .begin-item {
    background-color: #f5f5f5;
    margin: .5rem 20rpx;
    padding: 10rpx 20rpx;
    border-radius: 18rpx;
    position: relative;
    color: #666;
  }
  .open-icon {
    position: absolute;
    right: .5rem;
    bottom: 10%;
    color: #aaa;
    padding: .1rem .4rem;
  }
}

.item-view {
  background-color: rgb(228, 226, 252);
  color: black;
  margin: 20rpx 0;
  height: 100rpx;
}
.chat-item {
  margin: .2rem 0;
  padding: 16rpx 20rpx;
}
.item-time {
  text-align: center;
  color: rgb(119, 119, 119);
  font-size: 24rpx;
  padding-bottom: 10rpx;
}
.item-photo {
  width: 60rpx;
  height: 60rpx;
}
.item-img {
  flex: 1;
}
.item-left {
  display: flex;
  .item-content {
    margin-right: 1rem;
  }
}
.item-right {
  // text-align: right;
  display: flex;
  margin-left: 1rem;
}
.item-content {
    position: relative;
  display: inline-block;
  background-color: #ffffff;
  margin: 0 .2rem;
  padding: .8rem .8rem;
  // flex: 8;
  // width: 100%;
  width: 86%;
  border-radius: .5rem;
  //  font-size: 16px;
}
.scroll-text {
  // margin-top: 32rpx;
  max-height: 77vh;
}

// 添加按钮
.add-chat-btn {
  display: inline-block;
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  text-align: center;
  top: 15vh;
  right: 2vh;
  z-index: 100;
  font-size: 50rpx;
  background-color: rgba(121, 121, 247, 0.61);
  color: #fff;
  border-radius: 50%;
}
.creat-chat-btn {
  width: 50%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #0166eb;
  color: #fff;
  border-radius: 10rpx;
  text-align: center;
  position: absolute;
  bottom: 19%;
  left: 25%;
  // margin: 0 auto;
}
.cancel-chat-btn {
  width: 50%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: rgba(146, 146, 146, 0.733);
  color: #fff;
  border-radius: 10rpx;
  text-align: center;
  position: absolute;
  bottom: 12%;
  left: 25%;
  // margin: 0 auto;
}
// ce
page,.page {
  // height: 100%;
  position: relative;
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif;
 }
 /*左侧导航 */
 .page-top{
  position: fixed;
  width: 75%;
  height: 100%;
  top: 0;
  left: 0;
  // background-color: rgba(56, 113, 122, 0.9);
  //background: linear-gradient(#0098b3, #ebebeb) repeat-x center;
  transform: rotate(0deg) scale(1) translate(-100%,0%);
  -webkit-transform: rotate(0deg) scale(1) translate(-100%,0%);
  transition: all 0.4s ease;
  z-index: 998;
  padding-top: 20%;
  padding-bottom: 60%;
  overflow: auto;
     /* 添加以下样式以实现半透明玻璃效果 */
     background-color: rgba(255, 255, 255, 0.2); /* 使用白色并设置适当的透明度（例如 0.5） */
     backdrop-filter: blur(10px); /* 添加模糊效果以模拟玻璃质感 */
     -webkit-backdrop-filter: blur(10px); /* 对于支持 WebKit 的浏览器，如 Safari */
 }
 .page-top-show{
  transform: rotate(0deg) scale(1) translate(0%,0%);
  -webkit-transform: rotate(0deg) scale(1) translate(0%,0%);
 }
 .nav-list{
  padding: 30rpx 0 30rpx 40rpx;
  //color:#fff;
 }
 /*右侧展示 */
 .page-bottom{
  height: 100%;
  background-color: rgb(57, 125, 230);
  position: relative;
 }
 .off-nav-list{
  position: fixed;
  width: 60rpx;
  height: 50rpx;
  top: 20rpx;
  left:20rpx;
 }
 .page-bottom-content{
  padding:100rpx 20rpx 30rpx;
  color: #fff;
 }
 .page-mask{
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
 }
 .page-mask-hide{
  display: none;
 }
 .page-scroll {
   overflow: auto;
   height: 100%;
 }
 .nav-item-item{
   display: flex;
   align-items: center;
   .nav-item-con {
     flex: 5;
     position: relative;
     .nav-item-title {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 13rem;
     }
     .nav-item-time {
       font-size: x-small;
       color: rgb(103, 102, 102);
     }
   }
   .nav-item-del {
     flex: 1;
     text {
       display: inline-block;
       padding: .2rem .6rem;
       width: 2rem;
       border-radius: 8rpx;
       font-size: large;
       color: rgb(151, 111, 111);
      // background-color: rgb(163, 141, 141);
     }
   }
 }

.copy-button {
    position: absolute;
    bottom: 12rpx; /* 调整以适应所需位置 */
    left: calc(100% - 32px); /* 确保按钮位于内容左下角 */
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    //background-color: #53c7d2; /* 自定义背景色 */
    background-color: rgba(220, 217, 217, 0.73);
    color: #fff;
    cursor: pointer;
    z-index: 1; /* 确保按钮在内容之上 */
}

.copy-button > image {
    display: inline-block;
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.close-icon {
    position: absolute;
    top: 50%;
    right: 1px; /* 调整为合适的距离 */
    transform: translateY(-50%); /* 垂直居中 */
    cursor: pointer;
}
.close-icon image {
    width:20px;
    height:20px;
}

.pageTitle {
    text-align: center; /* 设置文本居中对齐 */
    font-weight: bold; /* 设置文本加粗 */
}

